<template>
  <component
    :is="component"
    :class="svgClass"
    aria-hidden="true"
    v-on="$listeners"
  >
    <use :href="iconName" />
  </component>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({
  name: "LySvgIcon",
  components: {},
})
export default class LySvgIcon extends Vue {
  //#region vue prop =================================
  @Prop({
    type: String,
    required: true,
    default: "",
  })
  iconClass: string;
  @Prop({
    type: String,
    required: false,
    default: "",
  })
  className: string;

  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================

  get component() {
    return this.iconClass.startsWith("el-") ? "i" : "svg";
  }
  get iconName() {
    return `#icon-${this.iconClass}`;
  }
  get svgClass() {
    if (this.iconClass.startsWith("el-")) {
      return this.iconClass;
    }
    if (this.className) {
      return "svg-icon " + this.className;
    } else {
      return "svg-icon";
    }
  }
  //#endregion
  //#region vue life =================================
  // created() {
  //   console.log("LySvgIcon " + "created");
  // }
  //
  // mounted() {
  //   console.log("LySvgIcon " + "mounted");
  // }
  //
  // beforeDestroy() {
  //   console.log("LySvgIcon " + "beforeDestroy");
  // }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================

  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss"></style>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>
